<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>热门搜索</title>
    <link rel="stylesheet" type="text/css" href="../../css/main.css" />
    <link rel="stylesheet" type="text/css" href="../../css/search.css" />
    <!-- <link rel="stylesheet" type="text/css" href="../../css/aui.css" /> -->
    <style>
        .tupian {
            float: left;
            width: 43%;
            position: relative;
        }

        .tupian .videotype {
            position: absolute;
            left: 10px;
            top: 10px;
            z-index: 9;
            background-color: rgba(243, 152, 0, 0.9);
            color: #fff;
            padding: 0px 8px;
            font-size: 12px;
            border-radius: 5px;
        }

        .jiazaigif {
            width: 20px;
            height: 20px;
            line-height: 24px;
            display: inline;
            /*float: left;*/
        }
        .cancel1{
          width:49%;
          float: left;
        }
        .sure{
          width:50%;
          float: left;
        }
        .clear{
          clear:both;
        }
        .sure{
          border-left:1px solid #ccc;

        }
    </style>
</head>

<body>
    <div id="vm"  v-cloak>
        <!-- <div class="first1">
          <div class="search test">
              <input type="text" name="" placeholder="音乐课程|" class="search_input" v-model="keyword" @keyup.enter="searchevent(keyword)">
              <img src="../../image/home/search.png" alt="" class="img-search" v-on:click="searchevent(keyword)">
          </div>
          <div class="cancel" onclick="closeWin()">取消</div>
          <div class="clear"></div>
      </div> -->
        <div class="big-box">

            <div v-if="issearch">

                <div v-if="issearchmsg" v-for="item1 in searchlist">
                    <div class="lists" @click="Openjieshao(item1)">
                        <div class="tupian">
                            <!-- <span class="videotype">{{videotype(item1.video_type)}}</span> -->
                            <img v-bind:src="item1.img" class="img_picture" alt="">
                        </div>
                        <div class="content1 test">
                            <p style="color:#000;font-size:15px;" v-html='item1.video_name'></p>
                            <p class="content_wenzi">{{item1.video_introduce_small}}</p>
                            <div class="shuoming">观看次数:&nbsp;&nbsp;{{item1.watch_count}}次</div>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
                <div style="text-align:center;line-height:24px;" v-if="isjiazaiflag">
                    <img class="jiazaigif" src="../../image/loading_more.gif" alt=""> 加载更多
                </div>
                <div class="last" v-if="!issearchmsg">
                    <img src="../../image/home/cat_1.png" alt="" class="cat">
                    <div class="content">暂无搜索内容</div>
                </div>

            </div>
            <div v-else>

                <div v-show="ishistory">

                    <div class="correlation">历史搜索
                        <div class="delete"  v-on:click="delcollbox()">
                            <img src="../../image/home/deletegray.png" alt="" class="delete_img">
                        </div>
                    </div>
                    <div class="box" v-for="item1 in keywordlist">
                        <span class="kraft" v-on:click="searchevent(item1)">{{item1}}</span>
                    </div>
                    <div class="clear"></div>
                </div>

                <div class="correlation">热门搜索</div>
                <ul class="box" v-for="item in hotsearchlist">
                    <span class="kraft" v-on:click="searchevent(item.word)">{{item.word}}</span>
                </ul>
                <div class="clear"></div>
                <div class="mask mask3 hide">
                    <div class="bombbox">
                        <div class="bombbox-title">是否清空历史搜索</div>
                        <div class="aui-row bombbox-foot">
                            <div class="segmenting"></div>
                            <div class="cancel1" v-on:click="cancelbox()">取消</div>
                            <div class="sure" v-on:click="clearhistory()">确定</div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </div>

            </div>


        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/config.js"></script>
<script type="text/javascript" src="../../script/rest.js"></script>
<script type="text/javascript" src="../../script/vue.2.5.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/faskclick.js"></script>
<script type="text/javascript">
    // hotsearchlist 存储所有的热搜关键词  keyword搜索关键字  keywordlist和 historylist存储本次搜索历史记录
    // issearch是否点击了搜索按钮   issearchmsg是否搜索到了内容   ishistory 是否有历史纪录
    var uid;
    var historylist = new Array();
    var vm = new Vue({
        el: '#vm',
        data: {
            hotsearchlist: [],
            keywordlist: [],
            keyword: '',
            ishistory: false,
            issearch: false,
            issearchmsg: false,
            searchlist: [],
            keywordcontent: '',
            page: 1,
            isjiazaiflag: false,
            nomore: false
        },
        created: function() {
            var _this = this;
            apiready = function() {
                _this.init();

                api.parseTapmode();
                if ('addEventListener' in document) {
                    document.addEventListener('DOMContentLoaded', function() {
                        FastClick.attach(document.body);
                    }, false);
                }

            }
        },
        methods: {
            init: function() {
                var _this = this;
                _this.keywordlist = $api.getStorage('keywordlist');
                uid = $api.getStorage('uid')
                    // 没有搜索记录的时候不显示
                if (!_this.keywordlist) {
                    _this.ishistory = false;
                    historylist = new Array();
                } else {
                    _this.ishistory = true;
                    historylist = $api.getStorage('keywordlist');
                }
                // 热搜
                _this.gethotsearch();
                api.addEventListener({
                    name: 'searchkeyword'
                }, function(ret, err) {
                    _this.keywordcontent = ret.value.keywordcontent;
                    _this.page = 1;
                    _this.searchlist = [];
                    _this.nomore=false;
                    _this.searchevent(ret.value.keywordcontent)
                });


                api.addEventListener({
                    name: 'scrolltobottom',
                    extra: {
                        threshold: 80 //设置距离底部多少距离时触发，默认值为0，数字类型
                    }
                }, function(ret, err) {
                    if (!_this.nomore) {
                        if (!_this.issearchmsg) {
                            _this.page = _this.page;
                        } else {
                            _this.isjiazaiflag = true;
                            setTimeout(function() {
                                _this.page = _this.page + 1;
                                _this.isjiazaiflag = false;
                                _this.searchevent(_this.keywordcontent);
                            }, 5000)
                        }

                    }
                });

            },
            delcollbox: function() {
                $('.mask3').removeClass('hide');
            },
            cancelbox:function () {
              $('.mask3').addClass('hide');

            },
            videotype: function(res) {
                if (res == '2') {
                    return 'VIP'
                } else if (res == '3') {
                    return '大咖'
                } else {
                    return '免费'
                }
            },
            Openjieshao: function(item) {
                var _this = this;
                if (uid) {
                    var data1 = {
                        video_id: item.id,
                        uid: uid
                    }
                } else {
                    var data1 = {
                        video_id: item.id,
                        uid: ''
                    }
                }
                new rest().get('getDetail').datae(data1).success(function(res) {
                    console.log(JSON.stringify(res))
                    if (res.flag == 1) {
                      api.closeWin({
                          name: 'videodetail_win'
                      });
                        apicmmon.openwin('videodetail_win', '../VIP/videodeail.html', {
                            videoid: item.id
                        })
                    } else {
                        api.toast({
                            msg: '视频不存在',
                            duration: 2000,
                            location: 'middle'
                        });
                    }
                }).error(function(err) {
                    console.log(JSON.stringify(err))
                }).run()

            },
            gethotsearch() {
                var _this = this;
                new rest().post('gethotsearch').datae().success(function(res) {
                    if (res.flag == 1) {
                        _this.hotsearchlist = res.msg;
                        console.log(JSON.stringify(_this.hotsearchlist))
                    } else {
                        api.toast({
                            msg: res.msg,
                            duration: 2000,
                            location: 'middle'
                        });
                    }
                }).error(function(err) {
                    console.log(JSON.stringify(err))
                }).run()
            },

            //删除历史搜索内容
            clearhistory: function() {
                var _this = this;
                $api.rmStorage('keywordlist');
                _this.keywordlist = '';
                _this.ishistory = false;
                historylist = new Array();
                $('.mask3').addClass('hide');

            },
            searchevent: function(keyword) {
                var _this = this;
                api.sendEvent({
                    name: 'clicksearchkeyword',
                    extra: {
                        keywordvalue: keyword,
                    }
                });

                if (!keyword) {
                    api.toast({
                        msg: '请输入搜索内容',
                        duration: 2000,
                        location: 'middle'
                    });
                } else {
                    _this.keywordcontent = keyword;
                    // 将搜索历史存入数组historylist
                    if (historylist.length == 20) {
                        if (historylist.indexOf(keyword) == -1) {
                            historylist.splice(0, 0, keyword);
                            historylist = historylist.slice(0, historylist.length - 1)
                                // alert(historylist)
                            $api.setStorage('keywordlist', historylist);
                        }
                    } else {
                        if (historylist.indexOf(keyword) == -1) {
                            historylist.splice(0, 0, keyword);
                            $api.setStorage('keywordlist', historylist);
                            // alert(historylist);
                        }
                    }
                    _this.issearchmsg = true;
                    // 不清空输入的搜索内容
                    _this.keyword = keyword;
                    _this.issearch = true;
                    new rest().get('search').datae({
                        'word': keyword,
                        'page': _this.page,
                        'psize': '20'
                    }).success(function(res) {
                        console.log(JSON.stringify(res))
                            // alert(JSON.stringify(res))
                        if (res.flag == 1) {
                            if (res.msg.length == 0) {
                                if (_this.page == 1) {
                                    _this.issearchmsg = false;
                                } else {
                                    _this.issearchmsg = true;
                                    _this.page = _this.page;
                                    _this.isjiazaiflag = false;
                                    _this.nomore = true;

                                    api.toast({
                                        msg: '没有更多了',
                                        duration: 2000,
                                        location: 'middle'
                                    });

                                }
                            } else {
                                _this.issearchmsg = true;
                                _this.searchlist = _this.searchlist.concat(res.msg);
                            }
                        }

                    }).error(function(err) {
                        console.log(JSON.stringify(err))
                    }).run()
                }

            },

        }
    })

    function closeWin() {
        api.closeWin();
    }
</script>

</html>
